<template>
    <div class="tab-content">
        <el-form ref="sharedTravelFormRef" :model="sharedTravelForm" :rules="sharedTravelRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="无人配送" prop="unmannedDelivery">
                        <el-input-number v-model="sharedTravelForm.unmannedDelivery" placeholder="请输入无人配送数量" :controls="false" :validate-event="true"/>
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="社区" prop="community">
                        <el-input-number v-model="sharedTravelForm.community" placeholder="请输入社区配送数量" :controls="false" />
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="外卖" prop="takeaway">
                        <el-input-number v-model="sharedTravelForm.takeaway" placeholder="请输入外卖配送数量" :controls="false"/>
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="共享" prop="shared">
                        <el-input-number v-model="sharedTravelForm.shared" placeholder="请输入共享配送数量" :controls="false" />
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="savesharedTravelData">保存配送数据配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { updateDataClassify } from '@/api/port'
    import { ElMessage } from 'element-plus'


    // 数字范围验证函数
    const validateNumber = (rule: any, value: number, callback: (error?: Error) => void) => {
        if (value === null || value === undefined) {
            callback(new Error('请输入数字'))
        } else if (value < 0) {
            callback(new Error('请输入大于等于0的数字'))
        } else if (value > 1000000) {
            callback(new Error('请输入小于等于1000000的数字'))
        } else {
            callback()
        }
    }
    // 表单验证规则
    const sharedTravelRules = {
        unmannedDelivery: [
            { required: true, message: '无人配送数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        community: [
            { required: true, message: '社区配送数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        takeaway: [
            { required: true, message: '外卖配送数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        shared: [
            { required: true, message: '共享配送数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ]
    }
    // 模块1: 配送数据配置表单
    const sharedTravelForm = ref<{
        unmannedDelivery: number, 
        community: number, 
        takeaway: number, 
        shared: number
    }>({
        unmannedDelivery: 0, // 无人配送
        community: 0, // 社区
        takeaway: 0, // 外卖
        shared: 0 // 共享
    })

    

    
    // 保存函数
    const sharedTravelFormRef = ref()
    const savesharedTravelData = async () => {
        if (!sharedTravelFormRef.value) return
        
        try {
            await sharedTravelFormRef.value.validate()
            await updateDataClassify({
                id: 3,
                key: 'module1',
                value: sharedTravelForm.value
            })
            console.log('保存配送数据配置:', sharedTravelForm.value)

            ElMessage.success('配送数据配置保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }
    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        if(module){
            sharedTravelForm.value = module
        }else{
            sharedTravelForm.value = {
                unmannedDelivery: 0, // 无人配送
                community: 0, // 社区
                takeaway: 0, // 外卖
                shared: 0 // 共享
            }
        }
    }
    defineExpose({
        init
    })

</script>
<style lang="less" scoped>

</style>